import * as THREE from 'three'
import createApp from '../../core'
// import * as SceneUtils from 'three/examples/jsm/utils/SceneUtils.js'
/**
 * 深度材质，相机的视野深度会影响材质的颜色
 * 如果需要其他颜色的渐变，需要使用联合材质
 */
function createMeshDepthMaterial (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(150, 100, 120)
  camera.lookAt(scene.position)
  camera.near = 100
  camera.far = 1000
  camera.updateProjectionMatrix()
  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const geometry = new THREE.BoxGeometry(10, 10, 10)
  const material = new THREE.MeshDepthMaterial()
  for (let index = 0; index <= 10; index++) {
    const box = new THREE.Mesh(geometry, material)
    box.position.z = 100 - 20 * index
    scene.add(box)
  }

  // 联合材质导入不进来
  //   const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x000fff })
  //   for (let index = 0; index <= 10; index++) {
  //     const box = SceneUtils.createMultiMaterialObject(geometry, [basicMaterial, material])
  //     box.position.x = 30
  //     box.position.z = 100 - 20 * index
  //     scene.add(box)
  //   }

  const folder1 = gui.addFolder('相机参数')
  folder1.add(crameData, 'near', 1, 1000, 1).onChange(() => {
    camera.near = crameData.near
    camera.updateProjectionMatrix()
  })
  folder1.add(crameData, 'far', 1, 1000, 1).onChange(() => {
    camera.far = crameData.far
    camera.updateProjectionMatrix()
  })
}

const crameData = {
  near: 50,
  far: 1000
}

export {
  createMeshDepthMaterial
}
